<template>
  <div class="link shotbox">
      <el-row :gutter="20">
        <el-col :xs="8" :sm="6" :md="4" :lg="4">
          <div class="link-box">
            <img src="@/assets/icon/icon1.png" alt="" @click="linkToUser">
            比赛报名
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="4">
          <div class="link-box">
            <img src="@/assets/icon/icon2.png" alt="" @click="linkToUser">
            培训报名
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="4">
          <div class="link-box">
            <img src="@/assets/icon/icon3.png" alt="" @click="linkToRegister">
            单位申请
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="4">
          <div class="link-box">
            <img src="@/assets/icon/icon4.png" alt="" @click="linkToSearch">
            资格查询
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="4">
          <div class="link-box">
            <img src="@/assets/icon/icon5.png" alt="" @click="linkToSearch">
            测评查询
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="4">
          <div class="link-box">
            <img src="@/assets/icon/icon6.png" alt="" @click="linkToSearch">
            成绩查询
          </div>
        </el-col>
      </el-row>  
    </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  methods:{
    linkToUser() {
      this.$router.push('/user');
    },
    linkToRegister() {
      this.$router.push('/register');
    },
    linkToSearch() {
      this.$router.push('/search');
    }
  }
}
</script>
<style>
.link-box {
  text-align: center;
}
.link-box img {
  display: block;
  margin:0 auto 10px;
}
</style>